<template>

<div id="GameMenu">
  <div id="homeBar">
    <mu-appbar title="游戏详情" style="background-color:#409EFF">
      <mu-icon-button  icon="arrow_back_ios" slot="left" :to="{name: 'Home' }"/>
    </mu-appbar>
  </div>

  <mu-list>
    <mu-list-item title="" >
      <mu-avatar v-bind:src="this.$image.icon1" slot="leftAvatar"/>
      大米人数<span style="color:red">&nbsp;{{ this.gameNum.dummyNum }}</span>
      <mu-icon value="arrow_forward"  slot="right"/>
    </mu-list-item>
    <mu-list-item title="">
      <mu-avatar v-bind:src="this.$image.icon2" slot="leftAvatar"/>
      小米人数<span style="color:red">&nbsp;{{ this.gameNum.eightNineNum }}</span>
      <mu-icon value="arrow_forward" slot="right"/>
    </mu-list-item>
    <mu-list-item title="">
      <mu-avatar v-bind:src="this.$image.icon3" slot="leftAvatar"/>
      八点人数<span style="color:red">&nbsp;{{ this.gameNum.cmNum }}</span>
      <mu-icon value="arrow_forward" slot="right"/>
    </mu-list-item>
  </mu-list>

</div>

</template>

<style>
#GameMenu .mu-item-content {
  text-align: left;
}
</style>

<script>
  export default {
    data () {
      return {
        gameNum: {
          dummyNum: 0,
          eightNineNum: 0,
          cmNum: 0
        }
      }
    },
    methods: {
      init () {
        this.getPlayingNum()
      },
      getPlayingNum () {
        let that = this
        this.$axios({
          method: 'get',
          url: '/api/GmService.getGamePlayingNum'
        })
        .then(response =>{
          if (response.data.status === 'success') {
            this.gameNum.dummyNum = response.data.dummyNum
            this.gameNum.eightNineNum = response.data.eightNineNum
            this.gameNum.cmNum = response.data.cmNum
          } else {
            this.$message.error(response.data.cause)
          }
        })
        .catch(e => {
          this.$message.error('服务器出小差了')
        })
      }
    },
    mounted () {
      this.init()
    }
  }
</script>
